<!--  -->
<template>
  <div>
    <header-top clickLeftTo="/search" :fixed="true" clickRightTO="/login">
      <template #left>
        <span class="iconfont icon-sousuo-copy"></span>
      </template>
      <template #middle>河北石家庄晋州市</template>
      <template #right v-if="!$store.state.isLogin"> 登录注册 </template>
      <template #right v-else>
        <span @click.prevent="logout">退出</span>
      </template>
    </header-top>
    <!-- categroy -->
    <v-touch
      v-on:swipeleft="onSwipeLeft"
      v-on:swiperight="onSwipeRight"
      tag="div"
    >
      <div class="container">
        <div class="box">
          <div
            class="item containerItems"
            v-for="(val, i) in pageCount"
            :key="i"
            :class="{ hidden: curindex != i }"
          >
            <div
              v-for="(currItem, innerIndex) in getCurrList(i + 1)"
              :key="innerIndex"
              :style="{ flex: `0 0 25%` }"
              @click="goToCategoryDetail(currItem.title)"
            >
              <img :src="baseUrl + currItem.image_url" />
              <p>{{ currItem.title }}</p>
            </div>
          </div>
        </div>
        <div class="Indicates">
          <span
            v-for="(val, index) in pageCount"
            :key="index"
            :class="{ cur: curindex == index }"
          ></span>
        </div>
      </div>
    </v-touch>
    <!-- 附近商家列表 -->
    <template v-if="reqShopList">
      <Shops v-model="reqShopList" />
    </template>
  </div>
</template>

<script>
/**
 * k-slide
 *
 * @param {Boolean}  [showIndicates]                    - 是否显示指示点
 * @param {String}   [indicateColor]                    - 指示点颜色
 * @param {String}   [selectedIndicateColor]            - 选中时候的按钮颜色
 * @param {Array}    [dataList]                         - 数据列表
 * @param {String}   [containerHeight=255px]            - 容器高度
 * @param {String}   [containerWidth=100%]              - 容器宽度
 * @param {Number}   [lineLength=4]                     - 一行显示的长度
 * @param {String}   [imageField]                       - 图片字段
 * @param {String}   [titleField]                       - 标题字段
 *
 */
import HeaderTop from "../../components/headerTop/HeaderTop.vue";
import { getCategory, reqShops } from "../../apis/profile/profile";
import { elemecdn } from "../../urls/urls";
import Shops from "../../components/shops/Shops.vue";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      dataList: [],
      curindex: 0,
      lineLength: 4,
      pageCount: 1,
      baseUrl: elemecdn,
      reqShopList: [],
    };
  },

  components: { HeaderTop, Shops },

  computed: {},
  methods: {
    goToCategoryDetail(title) {
      this.$router.push(`/categoryDetail/${title}`);
    },
    onSwipeLeft() {
      this.curindex < this.pageCount - 1 ? this.curindex++ : this.curindex;
    },
    onSwipeRight() {
      this.curindex > 0 ? this.curindex-- : this.curindex;
    },
    getCurrList(page = 1) {
      let sumLen = this.lineLength * 2;
      let start = (page - 1) * sumLen;

      return this.dataList.slice(start, start + sumLen);
    },
    getShops() {
      reqShops().then((response) => {
        this.reqShopList = response.data.data;
      });
    },
    logout() {
      let { commit } = this.$store;
      commit("setLogin", false);
      Toast({
        message: "退出登录成功",
        position: "middle",
        duration: 2000,
      });
    },
  },
  mounted() {
    getCategory().then((response) => {
      this.dataList = response.data.data;
      this.pageCount = Math.ceil(this.dataList.length / (this.lineLength * 2));
    });
    this.getShops();
  },
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 255px;
  background-color: #fff;
  position: relative;
  margin: auto;
}
.container div {
  font-size: 15px;
}
.box {
  height: 100%;
  display: flex;
}
.item.hidden {
  display: none;
}
.item {
  width: 100%;
  height: 100%;
  flex: none;
}
.Indicates {
  bottom: 0px;
  position: absolute;
  z-index: 100000;
  width: 100%;
  text-align: center;
  bottom: 5px;
}
.Indicates > span {
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #707070;
  margin-right: 6px;
}
.Indicates > span.cur {
  background-color: rgb(28, 170, 146);
}
.containerItems {
  width: 100%;
  align-content: space-evenly;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
}
.containerItems > div {
  flex: 0 0 25%;
  font-size: 0.5em;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}
.containerItems p {
  margin: 10px 0 0 0;
  color: #707070;
  font-size: 16px;
  font-weight: 450;
}
.containerItems img {
  width: 55px;
  display: block;
}
</style>
